<template>
    <div class="new_friend">
        <div class="header">{{ $t('msg.新的好友') }}</div>
        <div class="list">
            <div class="item" v-for="(item, index) in list" :key="index">
                <img :src="item.from_user.avatar" alt="" class="avatar">
                <div class="info">
                    <div class="name">{{ item.from_user.nickname }}</div>
                    <div class="desc">{{ item.verify_msg }}</div>
                </div>
                <div class="status pending" @click="viewFriend(item)" v-if="item.status == 0">
                    {{ $t('msg.接受') }}
                </div>
                <div class="status" v-else-if="item.status == 1">{{ $t('msg.已添加') }}</div>
                <div class="status" v-else>{{ $t('msg.已拒绝') }}</div>
            </div>
        </div>
        <div style="display: flex;align-items: center;justify-content: center;">
            <el-pagination background layout="prev, pager, next" :current-page="page" :total="total"
                @current-change="change" />
        </div>
        <el-dialog :title="$t('msg.通过朋友验证')" :visible="visible" top="100px" :modal="true" :center="true" width="430px"
            :show-close="false" append-to-body>
            <div class="dialog_content">
                <el-form label-position="top">
                    <el-form-item :label="$t('msg.请输入备注名')">
                        <el-input type="textarea" :placeholder="$t('msg.请输入备注名')" v-model="remarkName" maxlength="10"
                            class="item_input">
                        </el-input>
                    </el-form-item>

                    <el-form-item :label="$t('msg.设置朋友权限')">
                        <div class="switch_item" @click="doChange(1)">
                            <div class="key">{{ $t('msg.聊天朋友圈') }}</div>
                            <img src="@/assets/image/ok.png" alt="" class="ok_icon" v-if="type == 1">
                        </div>
                        <div class="switch_item" @click="doChange(2)">
                            <div class="key">{{ $t('msg.仅聊天') }}</div>
                            <img src="@/assets/image/ok.png" alt="" class="ok_icon" v-if="type == 2">
                        </div>
                    </el-form-item>
                    <el-form-item :label="$t('msg.朋友圈权限')" v-if="type == 1">
                        <div class="switch_item">
                            <div class="key">{{ $t('msg.不让她看') }}</div>
                            <el-switch v-model="hideFromHer" :inactive-value="0" active-value="1"
                                @change="switchChange"></el-switch>
                        </div>
                        <div class="switch_item">
                            <div class="key">{{ $t('msg.不看她') }}</div>
                            <el-switch v-model="dontSeeHer" :inactive-value="0" active-value="1"
                                @change="switchChange"></el-switch>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="footer">
                <el-button type="primary" @click="submit">{{ $t('msg.完成') }}</el-button>
                <el-button type="primary" plain @click="visible = false">{{ $t('msg.取消') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            keywords: "",

            page: 1,

            list: [],
            total: 0,

            item: null,
            visible: false,

            remarkName: "",
            type: 1,

            hideFromHer: 0, // 不让她看
            dontSeeHer: 0, // 不看她
        };
    },
    computed: {
        ...mapState(['contactKeywords'])
    },
    watch: {
        contactKeywords: {
            handler(newVal) {
                this.keywords = newVal;
                this.getList();
            },
            immediate: true
        }
    },
    methods: {
        async getList() {
            let { list: res } = await this.$api.chatApi.friendApplyList({
                keyword: this.keywords,
                page: this.page,
                page_size: 10
            });
            this.total = res.total;
            this.list = res.data;
        },
        change(value) {
            this.page = value;
            this.getList();
        },

        viewFriend(item) {
            this.item = item;
            this.visible = true;
        },
        async submit() {
            let from_id = this.item.from_user_id;
            let to_id = this.item.to_user_id;
            await this.$api.chatApi.handleFriendApply({
                apply_id: 0,
                from_im_user_id: from_id,
                to_im_user_id: to_id,
                action: "agree"
            });

            await this.$api.chatApi.updateFriend({
                friend_user_id: from_id,
                remark: this.remarkName,
                not_see_him: this.hideFromHer,
                not_see_me: this.dontSeeHer,
            })
            this.$message({
                message: this.$t('msg.验证成功'),
                type: 'success'
            });
            this.visible = false;
            this.item.status = 1;
        },
        doChange(type) {
            this.type = type;
            if (type == 1) {
                this.hideFromHer = this.dontSeeHer = 0;
            }
            if (type == 2) {
                this.hideFromHer = this.dontSeeHer = 1;
            }
        },
        switchChange() {
            if (this.hideFromHer && this.dontSeeHer) {
                this.type = 2;
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.new_friend {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #fff;

    .header {
        height: 92px;
        line-height: 92px;
        font-size: 20px;
        color: #333333;
        padding: 0 24px;
        box-sizing: border-box;
        background: #FCFCFE;
        box-shadow: inset 0px -1px 0px 0px rgba(104, 104, 104, 0.1);
    }

    .list {
        flex: 1;
        cursor: default;

        .item {
            padding: 10px 24px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;

            // &.active {
            //     background-color: #D9E7FE;
            // }

            &:hover:not(&.active) {
                background: #e3e3e3
            }

            .avatar {
                width: 52px;
                height: 52px;
                border-radius: 4px 4px 4px 4px;
            }

            .info {
                flex: 1;
                height: 52px;
                padding-left: 12px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .name {
                    font-size: 18px;
                    color: #333333;
                }

                .desc {
                    font-size: 14px;
                    color: #7F7F7F;
                }
            }

            .status {
                // width: 54px;
                padding: 0 6px;
                box-sizing: border-box;
                height: 32px;
                line-height: 32px;
                text-align: center;

                font-size: 18px;
                color: #333333;

                &.pending {
                    color: #FFFFFF;
                    background: #2273FF;
                    border-radius: 8px 8px 8px 8px;

                    cursor: pointer;
                }
            }
        }
    }
}
</style>
<style lang="scss">
.dialog_content {
    .el-form-item {
        margin-bottom: 16px;

        .el-form-item__label {
            padding: 0 0 8px 0;
        }

        .item_input {
            .el-textarea__inner {
                height: 104px;
                font-size: 16px;
                color: #333333;
                font-weight: 500;
                background: #F5F5F5;
            }
        }

        .switch_item {
            height: 52px;
            border-radius: 0px 0px 0px 0px;
            border-bottom: 1px solid #EDEDED;
            padding: 0 8px;
            box-sizing: border-box;
            background: #F5F5F5;

            display: flex;
            justify-content: space-between;
            align-items: center;

            .ok_icon {
                width: 24px;
                height: 24px;
            }

            &:first-child {
                border-radius: 8px 8px 0 0;
            }

            &:last-child {
                border-radius: 0 0 8px 8px;
                border-bottom: none;
            }
        }
    }
}

.footer {
    .el-button {
        width: 118px;
        height: 32px;
    }
}
</style>